<template>
	<div class="gears bg-f5">
		<ul class="gears-list container bg-white">
			<li class="border-b pt20 pb20" v-for='item in data.list'>
				<div class="layout-juscon">
					<img class="img-bg responsive-img" :src="item.img" alt="">
					<div class='flex_1 ml20'>
						<div class="layout">
							<div class=''>
								<p class='fs16 subject'><i class="fs12">￥</i>{{ item.stock_price }}</p>
								<span class="fs13 c666">限{{ item.s_num }}-{{ item.e_num }}个</span>
							</div>
							<button class="border subject fs13 pt5 pb5 pl10 pr10 radius" style="border-color:#ea2000" @click="select_sku(item)">预定</button>
						</div>
						<p class="fs12 c333 mt15 bold">预计发货日期：{{ item.send_time,'yyyy-MM-dd' | formatDate }}</p>
					</div>
				</div>
				<p class="fs12 c999 mt10">{{ item.introduction }}</p>
			</li>
		</ul>
		<van-popup v-model="sku_show" position="bottom" :overlay="true" v-if="data.good">
			<p class="align-right container fs20 c666" @click="sku_show = false">X</p>
		  	<div class="container pb10 border-b layout">
		  		<img class="img-bg responsive-img" style="width:5rem;height:5rem" :src="specificationImg" alt="">
				<div class="flex_1 ml15">
					<p class="fs16 black bold">{{ sku_list.goods_name }}</p>
					<p><span class="fs12 subject">￥</span><strong class="fs16 subject">{{ sku_list.stock_price }}</strong></p>
					<p v-if="stock">库存:{{ stock }}</p>
					<p v-else>库存:{{ data.good.stock }}</p>
				</div>
		  	</div>
		  	<div class="container pt15">
		  		<div class="flex">
		  			<h3 class="fs14 c333 bold flex-center mr10">数量:</h3>	
					<van-stepper :disable-input='true' :step="data.good.min_num" :min="data.good.min_num" v-model="quantity"/>
		  		</div>
				<p class="fs12 c999 pt10 pb10">说明：最少起订数为{{ data.good.min_num }}，加减需为整数倍</p>
			</div> 
			<div class="container sku-list">
				<ul v-if="data.spec.length" style="max-height:15rem;overflow-y: scroll;">
					<li v-for="(items,n) in data.spec" :key="n" class="mt20">
						<h3 class="pt10 pb10 fs14 c333">{{ items.spec_name }}</h3>
						<ul class="flex-left pb15">
							<li v-for="(item,index) in items.spec_data" class="border pt5 pb5 pl10 pr10 ml10 radius" :class="{ active : subIndex[n] == index }" :key="index" @click="selectCate(item,n,index)">{{ item.spec_value }}</li>
						</ul>
					</li>
				</ul>
			</div>
			<div class="layout">
				<button class="w50 align-center fs16 lh50 h50 c333 border-t" @click="add">加入购物车</button>
				<button class="w50 align-center fs16 lh50 h50 bg-subject white" @click="reserve">立即预定</button>
			</div>
		</van-popup>
	</div>
</template>

<script>
	import { formatDate } from "@/utils";
	import { Popup,Stepper,Toast } from 'vant';
	export default{
		components:
		{
			Popup,
			Stepper
		},
		data()
		{
			return{
				goods_id            : this.$route.query.id,
				sku_show	  		: false,
				quantity      		: 0,
				sku_id           	: 0,
				selectArr_id  		: [],
				selectArr     		: [],
				subIndex      		: [],
				data 		  		: [],
				canselect           : [],
				sku_list            : [],
				specificationImg 	: '',
				price            	: '',
				stock            	: '',
				select_id           : '',
			}
		},
		filters:
		{
			formatDate(time,fmt){
				let date = new Date(time);
				return formatDate(date,fmt);
			}
		},
		watch:
		{
			select_id(newVal)
			{
				this.canselect = this.data.sku.filter(res => res.select_id.indexOf(newVal)>-1);
				if(this.canselect.length == 1)
				{
					this.stock = this.canselect[0].stock;
					this.sku_id = this.canselect[0].sku_id;
					this.specificationImg = this.canselect[0].sku_img; 
				}
				else
				{
					this.price = '';
					this.stock = '';
					this.sku_id = '';
				}
			}
		},
		created()
		{
			this.loadData();
		},
		methods:
		{
			loadData()
			{
				this.$http.get('/gear/list',{ params : { id : this.$route.query.id } }).then( res=> {
					this.data = res.data;
					this.specificationImg = res.data.good.img;
					this.quantity = res.data.good.min_num
				})
			},
			select_sku(item)
			{
				this.sku_list = item;
				this.sku_show = true;
			},
			// 规格选中
			selectCate(item,n,index)
			{ 
				if (this.selectArr[n] != item.spec_value) 
				{
	                this.selectArr_id[n] = item.spec_value_id;
	                this.selectArr[n] = item.spec_value;
	                this.subIndex[n] = index;
	            }
	            else
	            {
	                this.selectArr[n] = "";
	                this.subIndex[n] = -1; //去掉选中的颜色 
            	}
				this.$forceUpdate();
				this.select_id = this.selectArr_id.join('_')
				// this.selectString = this.selectArr.join(' '); 
					
			},
			//加入购物车
			add()
			{
				if(!this.sku_id && this.data.spec.length)
					return this.sku_show = true;

				let params = {
					goods_id : this.goods_id,
					sku_id   : this.sku_id,
					count    : this.quantity
				}
				this.$http.post('/cart/add',params).then(res=>{
					this.sku_show = false;
				})
			},
			reserve()
			{
				if(!this.sku_id && this.data.spec.length)
					return Toast('请选择规格数量');
				else
					this.$router.push('/shopping/pay?goods_id='+this.goods_id + '&sku_id=' + this.sku_id + '&count=' + this.quantity)
			}
		}
	}
</script>

<style lang="less">
	.gears{
		.gears-list{
			li{
				&:last-child{
					border-bottom:none;
				}
				img{
					width: 6rem;
					height: 5rem;
					object-fit: cover;
				}
			}
		}
		.sku-list{
			.active
			{
				border-color: #ea2000;
				color:#ea2000;
			}
		}
	}
</style>